<script>

import renderItem from "./renderItem";
import renderContainer from "./renderContainer";
import { cloneDeep } from "lodash-es";

export default {
  name: "nestedDraggable",
  props: {
    schema: {
      required: true,
      type: Object,
    },
  },
  components: {
    renderItem,
    renderContainer,
  },
  methods: {},
  computed: {
    hasChildren() {
      return this.schema.children;
    },
  },

  render() {
    const schema = Object.freeze(cloneDeep(this.schema));
    if (schema.children || schema.type === "container") {
      return <renderContainer schema={this.schema} key={this.schema.id} />;
    } else {
      return <renderItem schema={this.schema} key={this.schema.id} />;
    }
  },
};
</script>
<style lang="scss" scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}

.drag-handle {
  position: relative;
  display: inline-block;
  width: 100%;
  // margin: 10px;
  padding: 10px;
  box-sizing: border-box;
  outline: 1px dashed;
  .move {
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    cursor: move;
  }
  .action {
    position: absolute;
    right: 0;
  }
}

.el-col-12.drag-handle {
  width: 50%;
}
</style>
